<template>
  <div class="wrapper meeting">
    <div class="ag-header">
      <div class="ag-header-lead">
        <!-- <img class="header-logo" :src="require('../assets/images/ag-logo.png')" alt="" /> -->
        <span style="color: white">视频会议</span>
      </div>
    </div>
    <div class="ag-main">
      <div class="ag-container">
        <AgoraVideoCall
          :videoProfile="videoProfile"
          :channel="channel"
          :transcode="transcode"
          :attendeeMode="attendeeMode"
          :baseMode="baseMode"
          :appId="appId"
          :uid="uid"></AgoraVideoCall>
      </div>
    </div>
  </div>
</template>

<script>
import AgoraVideoCall from './agora-video-call.vue'
import storage from 'good-storage'
export default {
  components: {
    AgoraVideoCall
  },
  data () {
    return {
        videoProfile: '480p_4',
        channel: '',
        transcode: 'interop',
        attendeeMode: 'video',
        baseMode: 'avc',
        appId: '',
        uid: ''
    }
  },
  created () {
    this.appId = 'ac531960423a481198f2b607b80d2be7'
    this.uid = storage.session.get('swuid')
    this.channel = storage.session.get('room_name')
  }
}
</script>

<style scoped>
.meeting.wrapper {
  background: rgb(12, 43, 64);
  height: 100%;
}

.meeting .ag-header {
  padding: 20px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ag-header-lead {
  font-size: 16px;
  line-height: 35px;
}

.meeting .ag-footer {
  padding: 0 30px;
  display: flex;
  align-items: center;
}

.meeting .ag-main {
  position: relative;
}

.meeting .ag-footer :first-child {
  margin-right: 80px;
}

.header-logo {
  width: 60px;
  height: 35px;
  margin-right: 12px;
}

.ag-container {
  width: calc(100% - 60px);
  height: 100%;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}
</style>

